<template>
  <div>
    <!--头部-->
    <div style="height: 60px;line-height: 60px;background-color: #ffffff;margin-bottom: 2px;display: flex">
      <div style="width: 600px"><span style="margin-left: 25px;font-size: 24px">欢迎使用教务设备借贷系统</span></div>
      <div style="flex: 1;text-align: right;padding-right: 20px">
        <el-dropdown size="medium">
  <span class="el-dropdown-link" style="cursor: pointer">
    {{ admin.username }}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
          <el-dropdown-menu slot="dropdown" style="margin-right: -10px">
            <el-dropdown-item><div style="width: 50px;text-align: center" @click="logout">退出</div></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
      </div>
    </div>

    <!-- 侧边和主体 -->
    <div style="display: flex">
      <!--侧边-->
      <div
          style="width: 200px;min-height: calc(100vh - 80px);height: 200px;overflow: hidden;margin-right: 2px;background-color: #ffffff">
        <el-menu :default-active="$route.path" router class="el-menu-demo">
          <el-menu-item index="/">首页</el-menu-item>
          <el-submenu index="/admin">
            <template slot="title">管理员管理</template>
            <el-menu-item index="/user">用户信息</el-menu-item>
            <el-menu-item index="/addRoom">增删教务设备</el-menu-item>
            <el-menu-item index="/check">查看教务设备借贷记录</el-menu-item>
          </el-submenu>
          <el-submenu index="/User">
            <template slot="title">用户使用</template>
            <el-menu-item index="/borrow">借用教务设备</el-menu-item>
            <el-menu-item index="/reback">归还教务设备</el-menu-item>
          </el-submenu>
          <el-submenu index="/Admin">
            <template slot="title">管理用户</template>
            <el-menu-item index="/addAdmin">管理员添加</el-menu-item>
            <el-menu-item index="/adminlist">管理员列表</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
      <!--主体-->
      <div style="flex: 1;background-color: #ffffff;padding: 10px" class="bgmain">
        <router-view/>
      </div>
    </div>
  </div>
</template>
<style>
.bgmain {
  background-image: url("../images/pic.jpg");
  background-size: 100% 100%;
}
</style>
<script>
import Cookies from 'js-cookie'
export default {
  name: "Layout.vue",
  data() {
    return {
      admin: Cookies.get('admin') ? JSON.parse(Cookies.get('admin')) : {}
    }
  },
  methods: {
    logout() {
      Cookies.remove('admin')
    //  清除浏览器的用户数据
      this.$router.push('/login')
    }
  }

}
</script>
